<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core';
import type { RouteKey } from '@elegant-router/types';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useRouterPush } from '@/hooks/common/router';

defineOptions({
    name: 'GlobalBreadcrumb'
});

const themeStore = useThemeStore();
const routeStore = useRouteStore();
const { routerPushByKey } = useRouterPush();

interface BreadcrumbContentProps {
    breadcrumb: App.Global.Menu;
}

const [DefineBreadcrumbContent, BreadcrumbContent] =
    createReusableTemplate<BreadcrumbContentProps>();

function handleClickMenu(key: RouteKey) {
    routerPushByKey(key);
}
</script>

<template>
    <NBreadcrumb v-if="themeStore.header.breadcrumb.visible">
        <!-- define component start: BreadcrumbContent -->
        <DefineBreadcrumbContent v-slot="{ breadcrumb }">
            <div class="i-flex-y-center align-middle">
                <component
                    :is="breadcrumb.icon"
                    v-if="themeStore.header.breadcrumb.showIcon"
                    class="mr-4px text-icon"
                />
                {{ breadcrumb.label }}
            </div>
        </DefineBreadcrumbContent>
        <!-- define component end: BreadcrumbContent -->

        <NBreadcrumbItem v-for="item in routeStore.breadcrumbs" :key="item.key">
            <NDropdown
                v-if="item.options?.length"
                :options="item.options"
                @select="handleClickMenu"
            >
                <BreadcrumbContent :breadcrumb="item" />
            </NDropdown>
            <BreadcrumbContent v-else :breadcrumb="item" />
        </NBreadcrumbItem>
    </NBreadcrumb>
</template>

<style scoped></style>
